<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        vue3 组件 v-model 指令的使用可以增加 : 关键字定义参数，完成多数据变量的双向绑定操作
            + 组件标签上可以同时定义多个v-model指令，没有:参数的指令默认使用 model-value
            + 如果组件定义的v-model 使用了:参数，指令默认使用:参数描述的名称 完成属性和事件绑定
                => 例如 绑定  v-model:info
                                    - v-bind:info
                                    - v-on:update:info
        </pre>
        <h5>父组件</h5>
        <p>msg:{{ msg }}</p>
        <p>info:{{ info }}</p>

        <my-comp v-model="msg" v-model:info="info"></my-comp>

    </div>

    <script type="text/x-template" id="my-comp">
        <div class="cbox">
            <input v-model="argA" type="text" />
            <br>
            <input v-model="argB" type="text" />
        </div>
    </script>

    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const MyComp = {
            template:"#my-comp",
            emits:["update:modelValue","update:info"],
            props:["modelValue","info"],
            computed: {
                argA:{
                    get(){
                        return this.modelValue
                    },
                    set(nv){
                        this.$emit("update:modelValue",nv)
                    }
                },
                argB:{
                    get(){
                        return this.info
                    },
                    set(nv){
                        this.$emit("update:info",nv)
                    }
                }
            },
        }
        createApp({
            components: {
                MyComp,
            },
            data(){
                return {
                   msg:"msg变量",
                   info:"info变量"
                }
            }
        }).mount("#app");
    </script>
</body>
</html>